/*
 * @description: 店铺入驻流程
 * @Author: along
 * @Date: 2021-03-29
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <div class="_perfect">
        <div class="_header">
            <i class="iconfont icon-logo"></i>
            <p class="_header_title">掌上大学—开创学生价商城</p>
        </div>
        <div class="_process">
            <div
                v-for="(option,index) in ['确定入驻协议','选择店铺类型','填写入驻信息','入驻审核']"
                :key="index"
                class="_process_item"
            >
                <div class="_process_wrap">
                    <!-- 进行中 -->
                    <template v-if="index === STEP">
                        <div class="_process_loading">
                            第{{ index | filterNumber }}步
                        </div>
                    </template>
                    <!-- 已完成 -->
                    <template v-if="index < STEP">
                        <i class="iconfont icon-duihao _process_success"></i>
                    </template>
                    <!-- 未开始 -->
                    <template v-if="index > STEP">
                        <div class="_process_wait">
                            第{{ index | filterNumber }}步
                        </div>
                    </template>
                    <p class="_process_content" :style="{color: index <= STEP ? 'rgba(248, 119, 57, 1)' : 'rgba(153, 153, 153, 1)'}">
                        {{ option }}
                    </p>
                </div>
                <div class="_process_line" v-if="index !== 3"></div>
            </div>
        </div>

        <!-- 步骤一 -->
        <template v-if="STEP === 0">
            <div class="_content">
                <p class="_content_title">
                    确认入驻协议
                </p>
                <div class="_content_wrap">

                </div>
                <div class="_content_foot">
                    <div class="_left">
                        <i class="iconfont icon-check_box_def" v-if="!is_check" @click="is_check = !is_check"></i>
                        <i class="iconfont icon-check_box_sel" v-if="is_check" @click="is_check = !is_check"></i>
                        <p class="_left_text">
                            我已经阅读且同意以上协议
                        </p>
                    </div>
                    <p class="_right" @click="handleAgree()">
                        同意
                    </p>
                </div>
            </div>
        </template>

        <!-- 步骤二 -->
        <template v-if="STEP === 1">
            <div class="_content2">
                <p class="_content2_title">
                    请选择店铺类型
                </p>
                <div class="_content2_wrap">
                    <p class="_content2_title">
                        {{ shop_type === 1 ? '个人店' : '个体工商户' }}
                    </p>
                    <p class="_content2_desc">
                        {{ shop_type == 1 ? '适合个人入驻提供身份证等即可开店' : '适合个体工商店户入驻提供营业执照等即可开店' }}
                    </p>
                    <div class="_content2_item" :style="{border: shop_type === 1 ? '1px rgba(248, 119, 57, 1) solid' : '1px rgba(234, 234, 234, 1) solid'}" @click="shop_type = 1">
                        <p class="_content2_item_title">
                            个人店
                        </p>
                        <p class="_content2_item_desc">
                            个人身份开店(无需营业执照)
                        </p>
                        <i class="iconfont icon-chenggong1" v-if="shop_type === 1"></i>
                        <p class="_content2_item_area" v-if="shop_type === 1"></p>
                    </div>
                    <div class="_content2_item" :style="{border: shop_type === 2 ? '1px rgba(248, 119, 57, 1) solid' : '1px rgba(234, 234, 234, 1) solid'}" @click="shop_type = 2">
                        <p class="_content2_item_title">
                            个体工商户
                        </p>
                        <p class="_content2_item_desc">
                            个体工商户开店(需要营业执照)
                        </p>
                        <i class="iconfont icon-chenggong1" v-if="shop_type === 2"></i>
                        <p class="_content2_item_area" v-if="shop_type === 2"></p>
                    </div>
                </div>
                <div class="_content2_foot">
                    <p
                        class="_content2_prev"
                        @click="() => {
                            STEP = 0
                        }"
                    >
                        上一步
                    </p>
                    <p
                        class="_content2_next"
                        @click="() => {
                            STEP = 2
                        }"
                    >
                        下一步
                    </p>
                </div>
            </div>
        </template>

        <!-- 步骤三 -->
        <template v-if="STEP === 2">
            <div class="_content3">
                <p class="_content3_title">
                    填写入驻信息
                </p>
                <div class="_content3_wrap">
                    <!-- 个体工商户 -->
                    <p class="_title">店铺基本信息</p>
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        ref="ruleForm"
                        label-width="140px"
                        class="demo-ruleForm"
                    >
                        <!-- 店铺基本信息 -->
                        <div class="_ruleForm1">
                            <div class="_ruleForm1_item">
                                <el-form-item
                                    label="店铺名称"
                                    prop="shop_name"
                                >
                                    <el-popover
                                        placement="top-start"
                                        width="484"
                                        trigger="hover"
                                        popper-class="container-form-provide"
                                    >
                                        <p class="container-form-provide">
                                            提交后店铺名称将不可更改，请谨慎填写！
                                        </p>
                                        <el-button
                                            slot="reference"
                                            class="el-no-button"
                                        >
                                            <el-input
                                                v-model="ruleForm.shop_name"
                                                size="medium"
                                                placeholder="请输入店铺名称，建议15字以内"
                                                maxlength="30"
                                                show-word-limit
                                                style="width:488px;"
                                            />
                                        </el-button>
                                    </el-popover>
                                </el-form-item>
                                <p class="_ruleForm1_item_desc" @click="$refs.perfectNotice.show()">
                                    取店铺名称需要注意什么？
                                </p>
                            </div>
                            <div class="_ruleForm2_item">
                                <el-form-item
                                    label="主营类目"
                                    prop="goods_type_name"
                                >
                                    <div class="_ruleForm2_type">
                                        <el-cascader
                                            v-model="ruleForm.goods_type_name"
                                            :options="shopTypeList"
                                            clearable
                                            :props="{ expandTrigger: 'hover' }"
                                            placeholder="请选择类目名"
                                            separator="-"
                                            size="medium"
                                            style="width:244px"
                                        />
                                        <!-- 自定义类目名,回填只需判断类目名数据是否在shopTypeList中存在 -->
                                        <!-- <el-input
                                            v-if="ruleForm.goods_type_name == '1'"
                                            v-model="ruleForm.goods_type_name_def"
                                            size="medium"
                                            placeholder="请输入自定义类目名"
                                            style="width:224px;margin-left:20px"
                                            clearable
                                        /> -->
                                    </div>
                                </el-form-item>
                                <el-form-item
                                    label="店铺地址"
                                    prop="reginValue"
                                >
                                    <el-cascader
                                        v-model="ruleForm.reginValue"
                                        :options="areaList"
                                        :props="{ expandTrigger: 'hover' }"
                                        @change="fnChangeAdress"
                                        clearable
                                        :filterable="true"
                                        separator="-"
                                        size="medium"
                                        placeholder="请选择省市区"
                                        :style="{width: '488px'}"
                                    />
                                </el-form-item>
                                <div class="_ruleForm_wrap">
                                    <!-- 搜索框 -->
                                    <el-input
                                        ref="mapInput"
                                        v-model="ruleForm.detail_info"
                                        placeholder="请输入详细地址"
                                        size="medium"
                                        clearable
                                        :style="{width: '488px', marginLeft: '140px'}"
                                        id="tipinput"
                                        class="_ruleForm_input"
                                        @input="searchKeyword()"
                                        @clear="handleGeolocation()"
                                        @blur="handleMapBlur()"
                                    />
                                    <!-- 搜索按钮 -->
                                    <p class="_ruleForm_search" @click="searchKeyword()">
                                        搜索地图
                                    </p>
                                    <!-- 输入框联想 -->
                                    <div class="_ruleForm_area" v-if="areaTips && showTips">
                                        <div
                                            v-for="(row,index) in areaTips"
                                            :key="index"
                                            class="_ruleForm_item"
                                            @click="handleChangeValue(row)"
                                        >
                                            {{ row.label }}
                                        </div>
                                    </div>
                                </div>
                                <!-- 地图展示 -->
                                <div class="_ruleForm_map" id="zsdx_map"></div>
                            </div>
                        </div>

                        <!-- 开店人基本信息 -->
                        <p class="_title">
                            开店人基本信息
                        </p>
                        <div class="_ruleForm2">
                            <el-form-item
                                label="身份证件像"
                                prop="legal_id_card_image"
                                :style="{marginBottom: '45px'}"
                            >
                                <div class="legal_image_wrap">
                                    <el-upload
                                        class="avatar-uploader-big"
                                        action="upload"
                                        accept="image/*"
                                        list-type="picture-card"
                                        :show-file-list="false"
                                        :http-request="(e) => {fnUploadImage(e, 'legal_id_card_image')}"
                                    >
                                        <div class="_card_side">
                                            <div class="_card_side_bg">
                                                <img
                                                    src="@/assets/image/idcard1.png"
                                                    class="legal_image"
                                                    v-if="!ruleForm.legal_id_card_image"
                                                >
                                                <img
                                                    :src="ruleForm.legal_id_card_image"
                                                    class="legal_image"
                                                    v-if="ruleForm.legal_id_card_image"
                                                    @mouseenter="handleMouseenter('is_legal_id_card_image')"
                                                >
                                            </div>
                                            <p class="_card_side_text">点击上传<span :style="{color: 'rgba(32, 160, 255, 1)'}">人面像</span></p>
                                        </div>
                                        <div
                                            v-if="is_legal_id_card_image"
                                            @mouseout="handleMouseLeaver('is_legal_id_card_image')"
                                            class="legal_ad"
                                        >
                                            <i class="el-icon-zoom-in" @click="fnPrievimage(ruleForm.legal_id_card_image)"></i>
                                            <i class="el-icon-delete" @click="ruleForm.legal_id_card_image = ''"></i>
                                        </div>
                                    </el-upload>
                                    <el-upload
                                        class="avatar-uploader-big"
                                        action="upload"
                                        accept="image/*"
                                        list-type="picture-card"
                                        :show-file-list="false"
                                        :http-request="(e) => {fnUploadImage(e, 'legal_id_card_national_image')}"
                                        :style="{marginLeft: '16px'}"
                                    >
                                        <div class="_card_side">
                                            <div class="_card_side_bg">
                                                <img
                                                    src="@/assets/image/idcard2.png"
                                                    class="legal_image"
                                                    v-if="!ruleForm.legal_id_card_national_image"
                                                >
                                                <img
                                                    :src="ruleForm.legal_id_card_national_image"
                                                    class="legal_image"
                                                    v-if="ruleForm.legal_id_card_national_image"
                                                    @mouseenter="handleMouseenter('is_legal_id_card_national_image')"
                                                >
                                            </div>
                                            <p class="_card_side_text">点击上传<span :style="{color: 'rgba(32, 160, 255, 1)'}">国徽面</span></p>
                                        </div>
                                        <div
                                            v-if="is_legal_id_card_national_image"
                                            @mouseout="handleMouseLeaver('is_legal_id_card_national_image')"
                                            class="legal_ad"
                                            @click="stop"
                                        >
                                            <i class="el-icon-zoom-in" @click.stop="fnPrievimage(ruleForm.legal_id_card_national_image)"></i>
                                            <i class="el-icon-delete" @click.stop="ruleForm.legal_id_card_national_image = ''"></i>
                                        </div>
                                    </el-upload>
                                    <div class="legal_view" :style="{height: '136px'}">
                                        <div class="legal_title"></div>
                                        <div class="legal_content">
                                            注意： <br/>
                                            待定待定待定待定待定待定待定待定待定待定待定待定待定待定待定<br/>
                                            待定待定待定待定待定待定待定待定待定待定待定待定待定待定待定【产品待定】<br/>
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item
                                label="学生证/录取通知书"
                                prop="student_id_card"
                            >
                                <div class="legal_image_wrap">
                                    <el-upload
                                        class="avatar-uploader-small"
                                        action="upload"
                                        accept="image/*"
                                        list-type="picture-card"
                                        :show-file-list="false"
                                        :http-request="(e) => {fnUploadImage(e, 'student_id_card')}"
                                    >
                                        <img
                                            src="//cdn.zsdx.cn/bcms/id_card_national_image.png"
                                            class="legal_image"
                                            v-if="!ruleForm.student_id_card"
                                        >
                                        <img
                                            :src="ruleForm.student_id_card"
                                            class="legal_image"
                                            v-if="ruleForm.student_id_card"
                                            @mouseenter="handleMouseenter('is_student_id_card')"
                                        >
                                        <div
                                            v-if="ruleForm.student_id_card"
                                            @mouseout="handleMouseLeaver('is_student_id_card')"
                                            class="legal_ad"
                                            @click="stop"
                                        >
                                            <i class="el-icon-zoom-in" @click.stop="fnPrievimage(ruleForm.student_id_card)"></i>
                                            <i class="el-icon-delete" @click.stop="ruleForm.student_id_card = ''"></i>
                                        </div>
                                    </el-upload>
                                    <div class="legal_view">
                                        <div class="legal_title" @click="fnPrievimage(previewStudentIdCardImages, 0)">查看示例</div>
                                        <div class="legal_content">
                                            注意： <br/>
                                            待定待定待定待定待定待定待定待定待定待定待定待定待定待定待定<br/>
                                            待定待定待定待定待定待定待定待定待定待定待定待定待定待定待定【产品待定】<br/>
                                        </div>
                                    </div>
                                </div>
                            </el-form-item>

                            <!-- 个人开店无需展示 -->
                            <template v-if="shop_type == 2">
                                <el-form-item
                                    label="是否三证合一"
                                >
                                    <div class="student_code_wrap">
                                        <div class="student_code">
                                            <el-radio v-model="certificates_type" :label="2">统一社会信用代码</el-radio>
                                        </div>
                                        <div class="student_code">
                                            <el-radio v-model="certificates_type" :label="1">营业执照注册号</el-radio>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item
                                    label="统一社会信用代码"
                                    prop="unified_socoal_credit_code"
                                    v-if="certificates_type === 2"
                                >
                                    <el-input
                                        v-model="ruleForm.unified_socoal_credit_code"
                                        size="medium"
                                        placeholder="请输入92开头的18位阿拉伯数字或大写英文字母"
                                        maxlength="50"
                                        show-word-limit
                                        style="width:488px;"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="营业执照注册号"
                                    prop="brand_logo_reg_no"
                                    v-if="certificates_type === 1"
                                >
                                    <el-input
                                        v-model="ruleForm.brand_logo_reg_no"
                                        size="medium"
                                        placeholder="请输入阿拉伯数字或大写英文字母"
                                        maxlength="50"
                                        show-word-limit
                                        style="width:488px;"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="个体工商户名称"
                                    prop="company_main_name"
                                >
                                    <el-input
                                        v-model="ruleForm.company_main_name"
                                        size="medium"
                                        placeholder="请输入个体工商户名称"
                                        show-word-limit
                                        style="width:488px;"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="营业执照"
                                    prop="brand_logo_reg_images"
                                >
                                    <div class="legal_image_wrap">
                                        <el-upload
                                            class="avatar-uploader-small"
                                            action="upload"
                                            accept="image/*"
                                            list-type="picture-card"
                                            :show-file-list="false"
                                            :http-request="(e) => {fnUploadImage(e, 'brand_logo_reg_images')}"
                                        >
                                            <img
                                                src="//cdn.zsdx.cn/bcms/upload_image.png"
                                                class="legal_image"
                                                v-if="!ruleForm.brand_logo_reg_images"
                                            >
                                            <img
                                                :src="ruleForm.brand_logo_reg_images"
                                                class="legal_image"
                                                v-if="ruleForm.brand_logo_reg_images"
                                                @mouseenter="handleMouseenter('is_brand_logo_reg_images')"
                                            >
                                            <div
                                                v-if="ruleForm.brand_logo_reg_images"
                                                @mouseout="handleMouseLeaver('is_brand_logo_reg_images')"
                                                class="legal_ad"
                                                @click="stop"
                                            >
                                                <i class="el-icon-zoom-in" @click.stop="fnPrievimage(ruleForm.brand_logo_reg_images)"></i>
                                                <i class="el-icon-delete" @click.stop="ruleForm.brand_logo_reg_images = ''"></i>
                                            </div>
                                        </el-upload>
                                        <div class="legal_view">
                                            <div class="legal_content" :style="{marginTop: '20px'}">
                                                注意： <br/>
                                                1、您上传的营业执照信息审核通过后，店铺认证就会变为个体工商户 <br/>
                                                2、请提供经营者姓名和入驻人一致的个提供商户营业执照 <br/>
                                                3、个体工商户只能更新自己的营业执照，不能删除
                                            </div>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item
                                    label="有效期截止至"
                                    prop="brand_authorize_expire_time"
                                >
                                    <div class="_ruleForm_time">
                                        <el-date-picker
                                            v-model="ruleForm.brand_authorize_expire_time"
                                            type="datetime"
                                            placeholder="选择日期时间"
                                            size="medium"
                                            :style="{width: '372px', marginRight: '24px'}"
                                        />
                                        <el-checkbox v-model="is_expire_time">长期</el-checkbox>
                                    </div>
                                </el-form-item>
                            </template>
                        </div>
                    </el-form>
                </div>
                <div class="_content3_foot">
                    <p
                        class="_content3_prev"
                        @click="() => {
                            STEP = 1
                        }"
                    >
                        上一步
                    </p>
                    <p class="_content3_next" @click="handleSubmitForm('ruleForm')">
                        提交
                    </p>
                </div>
            </div>
        </template>

        <!-- 步骤四 -->
        <template v-if="STEP === 3">
            <div class="_content4">
                <!-- 提交成功 -->
                <template v-if="SUBMIT_SUCCESS">
                    <i class="iconfont icon-chenggong1"></i>
                    <p class="_content4_title">提交成功</p>
                    <p class="_content4_text">入驻申请已提交成功，将在3个工作日内完成审核，审核结果通过短</p>
                    <p class="_content4_text">信通知到您的手机号，请注意查收</p>
                    <div
                        class="_content4_button"
                        @click="handleBackHome()"
                    >
                        返回首页
                    </div>
                </template>

                <!-- 审核中 -->
                <template v-if="STATUS === 0 && !SUBMIT_SUCCESS">
                    <i class="iconfont icon-dengdai" :style="{color: 'rgba(243,199,66,1)'}"></i>
                    <p class="_content4_title">审核中</p>
                    <p class="_content4_text">入驻申请已提交成功，将在3个工作日内完成审核，审核结果通过短</p>
                    <p class="_content4_text">信通知到您的手机号，请注意查收</p>
                    <div
                        class="_content4_button"
                        @click="handleBackHome()"
                    >
                        返回首页
                    </div>
                </template>

                <!-- 审核失败 -->
                <template v-if="STATUS === -1">
                    <i class="iconfont icon-red_close" :style="{color: 'rgba(217,90,95,1)'}"></i>
                    <p class="_content4_title">很遗憾,入驻申请未通过</p>
                    <p class="_content4_text">我是未通过理由,我是未通过理由,我是未通过理由,我是未通过理由,我是未通过理由,我是未通过理由,</p>
                    <div
                        class="_content4_button_rest"
                        @click="handleRestData()"
                    >
                        重新填写资料
                    </div>
                </template>

                <!-- 入驻成功 -->
                <template v-if="STATUS === 1">
                    <i class="iconfont icon-chenggong1"></i>
                    <p class="_content4_title">入驻成功</p>
                    <p class="_content4_text">恭喜您，您的入驻申请已通过审核～</p>
                    <div
                        class="_content4_button_rest"
                        @click="handleNextSyatem()"
                    >
                        进入后台
                    </div>
                </template>
            </div>
        </template>

        <!-- 取店名称 -->
        <perfect-notice ref="perfectNotice"></perfect-notice>

        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import perfectNotice from '@/components/dialog/perfect-notice.vue';
import imgPreview from '@/components/common/img-preview';
import { mapState } from 'vuex';
export default {
    components: {
        perfectNotice,
        imgPreview
    },
    data() {
        const validateName = (rule, value, callback) => {
            let list = ['特约经营','特许经营','特许经销','特约经销','总经销','总代理','厂家认证','官方店铺','旗舰','专卖','专营','官方','直营','官','官方认证','官方授权'];
            let flag = false;

            for(let i=0; i<list.length; i++) {
                if(value.indexOf(list[i]) > -1) {
                    flag = true;
                }
            }

            setTimeout(()=>{
                if(flag) {
                    callback(new Error('名称中含有违禁或误导性质的词'));
                } else {
                    callback();
                }
            },100);
        };

        const validateGoodsType = (rule, value, callback) => {
            // if(value && value == '1') { //自定义类目名
            //     if(this.ruleForm.goods_type_name_def) {
            //         callback();
            //     } else {
            //         callback(new Error('自定义类目名不可以为空'));
            //     }
            // }

            // if(value && value !== '1') {
            //     callback();
            // }

            if(value) {
                callback();
            }

            if(!value) {
                callback(new Error('主营类目不可以为空'));
            }
        };

        const validateRegin = (rule, value, callback) => {
            if (value === '' || !this.ruleForm.detail_info) {
                callback(new Error('请输入店铺地址'));
            }else if (value.length == 3) {
                callback();
            }
        };

        const validateIdCardImage = (rule, value, callback) => {
            if(!this.ruleForm.legal_id_card_image && !this.ruleForm.legal_id_card_national_image){
                callback(new Error('请上传身份证正反面照片'));
            }else if(!this.ruleForm.legal_id_card_image) {
                callback(new Error('请上传身份证正面照片'));
            }else if (!this.ruleForm.legal_id_card_national_image) {
                callback(new Error('请上传身份证反面照片'));
            }else {
                callback();
            }
        };

        const validateStudentIdCardImage = (rule, value, callback) => {
            if(!this.ruleForm.student_id_card) {
                callback(new Error('请上传学生证或者录取通知书'));
            } else {
                callback();
            }
        };

        const validateStudentCode = (rule, value, callback) => {
            if(this.certificates_type === 2) {
                if(this.ruleForm.unified_socoal_credit_code) {
                    callback();
                } else {
                    callback(new Error('请填写统一社会信用代码'));
                }
                return false;
            }
            if(this.certificates_type === 1) {
                if(this.ruleForm.brand_logo_reg_no) {
                    callback();
                } else {
                    callback(new Error('请填写营业注册号'));
                }
                return false;
            }
        };

        const validateBrandExpreTime = (rule, value, callback) => {
            if(!this.is_expire_time) {//非长期
                if(this.ruleForm.brand_authorize_expire_time) {
                    callback();
                } else {
                    callback(new Error('请选择到期时间'));
                }
            } else { //长期
                callback();
            }
        };

        return {
            KEY: '9248c2a26dc611f751cec20a5cd23e48',//地图key
            STEP: 0,//当前进度 0:确认入驻协议 1:选择店铺类型 2:填写入驻信息 3:入驻审核
            STATUS: -2,//店铺入驻审核状态, -2:未提交, 0:待审核, 1:审核通过, -1:审核不通过
            //步骤一
            is_check: false,
            //步骤二
            shop_type: 2,//1:个人店 2:个体工商户
            // 步骤三
            ruleForm: {
                shop_name: '',//店铺名称
                goods_type_name: '',//主营类目
                // goods_type_name_def: '',//自定义类目
                reginValue: [],//店铺地址
                province_name: '',//省份名称
                city_name: '',//城市名称
                county_name: '',//区名称
                detail_info: '',//详细地址
                legal_id_card_image: '',//身份证正面照片
                legal_id_card_national_image: '',//身份证反面照片
                student_id_card: '',//学生证录取通知书
                unified_socoal_credit_code: '',//统一社会信用码
                brand_logo_reg_no: '',//营业执照注册号
                company_main_name: '',//个体工商户名称
                brand_logo_reg_images: '',//营业执照
                brand_authorize_expire_time: '',//有效截止日期
            },
            rules: {
                shop_name: [
                    { required: true, message: '店铺名称不可为空', trigger: 'change' },
                    { validator: validateName, trigger: 'change' },
                ],
                goods_type_name: [
                    // { required: true, trigger: 'change' },
                    // { validator: validateGoodsType, trigger: 'change' },
                    { required: true, message: '主营类目不可以为空', trigger: 'change' }
                ],
                reginValue: [
                    { validator: validateRegin, trigger: 'blur' },
                    { required: true, message: '收货地址不可以为空', trigger: 'change' }
                ],
                legal_id_card_image: [
                    { validator: validateIdCardImage, trigger: 'blur' },
                    { required: true, trigger: 'change' }
                ],
                student_id_card: [
                    { validator: validateStudentIdCardImage, trigger: 'blur' },
                    { required: true, trigger: 'change' }
                ],
                unified_socoal_credit_code: [
                    { validator: validateStudentCode, trigger: 'blur' },
                    { required: true, trigger: 'change' }
                ],
                brand_logo_reg_no: [
                    { validator: validateStudentCode, trigger: 'blur' },
                    { required: true, trigger: 'change' }
                ],
                company_main_name: [
                    { required: true, message: '个体工商户名称不可以为空', trigger: 'change' }
                ],
                brand_logo_reg_images: [
                    { required: true, message: '营业执照不可以为空', trigger: 'change' }
                ],
                brand_authorize_expire_time: [
                    { validator: validateBrandExpreTime, trigger: 'blur' },
                    { required: false, trigger: 'change' }
                ]
            },
            areaList: [],//城市数据列表
            SUBMIT_SUCCESS: false,//提交成功后改变状态
            // 地图相关
            areaTips: [],//地图搜索提示数据
            showTips: false,//是否显示搜索结构
            mapObj: '',//地图实例
            // 表单相关
            previewIdCardImages: [
                'http://cdn.zsdx.cn/bcms/id_card1.png',
                'http://cdn.zsdx.cn/bcms/id_card2.png'
            ],
            previewStudentIdCardImages: [
                'http://cdn.zsdx.cn/bcms/id_card3s.png',
                'http://cdn.zsdx.cn/bcms/id_card4s.png'
            ],
            shopTypeList: [],//二级类目
            is_legal_id_card_image: false,
            is_legal_id_card_national_image: false,
            is_student_id_card: false,
            is_brand_logo_reg_images: false,
            certificates_type: 1,//1营业执照注册号 2:统一社会信用代码
            is_expire_time: false,//true: 长期 false: 非长期
        };
    },
    filters: {
        filterNumber(val) {
            if(val === 0) return '1';
            if(val === 1) return '2';
            if(val === 2) return '3';
            if(val === 3) return '4';
        }
    },
    computed: {
        ...mapState({
        })
    },
    watch: {
        STEP: {
            handler: function (val) {
                if(val === 2) {
                    setTimeout(() => {
                        this.initMap();
                    },300);
                }
            },
            deep: true,
            immediate:true
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        /**
         * @description 初始化页面数据
         */
        init () {
            this.handleGetInfo();
            this.handleCheckAreaList();
            this.getShopTypeList();
        },

        /**
         * @description 初始化地图
         */
        initMap() {
            // 查询定位支持 获取定位权限（支持https）
            navigator.geolocation.getCurrentPosition(pos => {
                //获取位置权限成功
            }, err => {
                console.warn(`ERROR(${err.code}): ${err.message}`);
            }, {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 0
            });

            this.$nextTick(() => {
                let mapObj = new AMap.Map('zsdx_map', {
                    resizeEnable: true,
                    zoom: 16,
                    viewMode: '3D',
                    pinch: 45
                });

                // 绑定地图对象
                this.mapObj = mapObj;

                // 获取地图对象
                let mapObj2 = new AMap.Map('iCenter');

                // 添加控件
                mapObj2.plugin([
                    'AMap.ToolBar',
                    'AMap.OverView',
                    'AMap.MapType'
                ], function(){
                    mapObj.addControl(new AMap.ToolBar({visible: true}));
                    mapObj.addControl(new AMap.OverView({visible: true}));
                    mapObj.addControl(new AMap.MapType());
                });

                // 自动定位
                this.handleGeolocation();

                //为地图注册click事件获取鼠标点击出的经纬度坐标,然后获取对应位置
                mapObj.on('click', e => {
                    fetch(`https://restapi.amap.com/v3/place/around?key=${this.KEY}&location=${e.lnglat.getLng()},${e.lnglat.getLat()}&radius=2000&types=120000`).then(response => {
                        return response.json();
                    }).then(lnglat => {
                        console.log('获取点击信息', lnglat);
                        const detail_info = !!lnglat.pois.length ? (lnglat['pois'][0]['pname'] + lnglat['pois'][0]['cityname'] + lnglat['pois'][0]['name'] + lnglat['pois'][0]['address']) : '';
                        const location = !!lnglat.pois.length ? (lnglat['pois'][0]['location']) : '';

                        if(detail_info) {
                            this.$set(this.ruleForm, 'detail_info', detail_info);
                        }

                        if(location) {
                            this.handleChangeValue({
                                label: detail_info ? detail_info : '',
                                value: e.lnglat.getLng() + ',' + e.lnglat.getLat()
                            });
                        }
                    });
                });

                // 地图类型
                mapObj.on('indoor_create',function(){
                    mapObj.indoorMap.showIndoorMap('B000A856LJ',5);
                });
            });
        },

        /**
         * @description 关键词搜索
         */
        searchKeyword(){
            const url = `https://restapi.amap.com/v3/assistant/inputtips?output=json&keywords=${this.ruleForm.detail_info}&key=${this.KEY}`;
            // const url = `https://restapi.amap.com/v3/place/text?keywords=${this.ruleForm.detail_info}&city=&output=json&offset=20&page=1&key=9248c2a26dc611f751cec20a5cd23e48&extensions=all`;

            fetch(url).then(response => {
                return response.json();
            }).then(myJson => {
                this.areaTips = myJson.tips.reduce((cur,next) => {
                    cur.push({
                        value: next.location,
                        label: next.district + next.name + next.address
                    });
                    return cur;
                }, []);
                this.showTips = this.areaTips.length ? true : false;
            });

            this.$refs.mapInput.focus();
        },

        /**
         * @description 搜索结果选择并进行定位
         */
        handleChangeValue (row) {
            // console.log('搜索结果', row);
            try {
                this.$set(this.ruleForm, 'detail_info', row.label);

                if(!!row.value.split(',').length) {
                    this.mapObj.setCenter([
                        row.value.split(',')[0],
                        row.value.split(',')[1]
                    ]);
                } else {
                    this.handleGeolocation();
                }

                // 添加点标记
                let marker = new AMap.Marker({
                    icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                    position: [row.value.split(',')[0],row.value.split(',')[1]],
                    offset: new AMap.Pixel(-13, -30)
                });
                marker.setMap(this.mapObj);

                this.showTips = false;
            } catch (error) {
                this.$notify({
                    type: 'warning',
                    title: '警告',
                    duration: 2000,
                    message: '获取位置失败！'
                });
                this.handleGeolocation();
            }
        },

        /**
         * @description 清除位置信息，定位到当前位置
         */
        handleGeolocation () {
            let mapObj2 = new AMap.Map('iCenter');

            // 处理自动定位，并添加定位控件
            mapObj2.plugin('AMap.Geolocation', () => {
                let geolocation = new AMap.Geolocation({
                    timeout: 10000,
                    GeoLocationFirst: false,
                    maximumAge: 0
                });
                this.mapObj.addControl(geolocation);
                geolocation.getCurrentPosition();

                AMap.event.addListener(geolocation, 'complete', data => {
                    console.log('获取定位信息成功', data.position.getLng(), data.position.getLat());
                });
                AMap.event.addListener(geolocation, 'error', data => {
                    if (data.info == 'FAILED') {
                        this.$notify({
                            type: 'warning',
                            title: '警告',
                            duration: 2000,
                            message: '获取您当前位置失败！'
                        });
                    }
                });
            });
        },

        /**
         * @description 搜索地图输入框失焦处理
         */
        handleMapBlur () {
            setTimeout(() => {
                this.showTips = false;
            },200);
        },

        /**
         * @description 提交表单
         */
        handleSubmitForm (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const data = {
                        organization_type: this.shop_type,
                        shop_title: this.ruleForm.shop_name,
                        goods_type_name: this.ruleForm.goods_type_name,
                        province_name: this.ruleForm.province_name,
                        city_name: this.ruleForm.city_name,
                        county_name: this.ruleForm.county_name,
                        detail_info: this.ruleForm.detail_info,
                        authorization_info: JSON.stringify({
                            id_card_image: this.ruleForm.legal_id_card_image,
                            id_card_national_image: this.ruleForm.legal_id_card_national_image,
                            student_image: this.ruleForm.student_id_card,
                            cert_type: this.certificates_type,
                            cert_no: this.certificates_type === 1 ? this.ruleForm.brand_logo_reg_no : this.ruleForm.unified_socoal_credit_code,
                            cert_name: this.ruleForm.company_main_name,
                            cert_image: this.ruleForm.brand_logo_reg_images,
                            cert_end_time: this.is_expire_time ? -1 : this.ruleForm.brand_authorize_expire_time
                        })
                    };

                    this.$post('/ShopSettleVerify/checkIdCard', {
                        ...data
                    }, (resp) => {
                        if (resp.code == 1) {
                            this.STEP = 3;
                            this.SUBMIT_SUCCESS = true;
                        } else {
                            this.$notify({
                                type: 'warning',
                                title: '警告',
                                duration: 2000,
                                message: resp.msg
                            });
                        }
                    });

                } else {
                    return false;
                }
            });
        },

        /**
         * @description 查询店铺数据
         */
        handleGetInfo () {
            // test
            this.shop_type = 1;
            this.STATUS = 1;
            this.STEP = 0;
            // test

            this.$post('/ShopSettleVerify/getInfo', {}, (resp) => {
                if (resp.code == 1) {
                    const shopForm = resp.data;

                    this.ruleForm = {
                        shop_name: shopForm.shop_title,//店铺名称
                        goods_type_name: shopForm.goods_type_name,//主营类目
                        // goods_type_name_def: '',//自定义类目
                        reginValue: [
                            shopForm.province_name,
                            shopForm.city_name,
                            shopForm.county_name
                        ],//店铺地址
                        province_name: shopForm.province_name,//省份名称
                        city_name: shopForm.city_name,//城市名称
                        county_name: shopForm.county_name,//区名称
                        detail_info: shopForm.detail_info	,//详细地址
                        legal_id_card_image: shopForm.authorization_info.id_card_image,//身份证正面照片
                        legal_id_card_national_image: shopForm.authorization_info.id_card_national_image,//身份证反面照片
                        student_id_card: shopForm.authorization_info.student_image,//学生证录取通知书
                        unified_socoal_credit_code: shopForm.authorization_info.cert_no,//统一社会信用码
                        brand_logo_reg_no: shopForm.authorization_info.cert_no,//营业执照注册号
                        company_main_name: shopForm.authorization_info.cert_name,//个体工商户名称
                        brand_logo_reg_images: shopForm.authorization_info.cert_image,//营业执照
                        brand_authorize_expire_time: shopForm.authorization_info.cert_end_time,//有效截止日期
                    };

                    // STEP: 0,//当前进度 0:确认入驻协议 1:选择店铺类型 2:填写入驻信息 3:入驻审核
                    // STATUS: 2,//店铺入驻审核状态, -2:未提交, 0:待审核, 1:审核通过, -1:审核不通过

                    this.is_expire_time = shopForm.authorization_info.cert_end_time == -1 ? true : false;//营业期限结束时间, -1:长期
                    this.shop_type = shopForm.organization_type;
                    this.certificates_type = shopForm.authorization_info.cert_type;
                    this.STATUS = shopForm.verify;
                    this.STEP = shopForm.verify == -2 ? 0 : 3;
                } else {
                    this.$notify({
                        type: 'warning',
                        title: '警告',
                        duration: 2000,
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * @description 获取二级类目数据
         */
        getShopTypeList () {
            let list = [];
            // new_type = [{
            //     value: '1',
            //     label: '自定义'
            // }];

            this.$post('', {}, resp => {
                if (resp.code == 1) {
                    resp.data.list.forEach((element,key) => {
                        if(element.title) {
                            list.push({
                                value: element.title,
                                label: element.title,
                                children: []
                            });
                            if(element.children) {
                                element.children.forEach(option => {
                                    list[key].children.push({
                                        value: option.title,
                                        label: option.title
                                    });
                                });
                            }
                        }
                    });

                    // setTimeout(()=>{
                    //     this.shopTypeList = new_type.concat(list);
                    // },50);
                }
            });
        },

        /**
         * @description 获取省市区数据
         */
        handleCheckAreaList () {
            let list = [];

            this.$post('/Localinfo/getAreaAddressCodeList', {}, resp => {
                if (resp.code == 1) {
                    if(resp.code == 1) {
                        let regin = resp.data.province_list;

                        regin.forEach((element,key) => {
                            list.push({
                                value: element.name,
                                label: element.name,
                                children: []
                            });
                            if(element.city_list) {
                                element.city_list.forEach((option,i) => {
                                    list[key].children.push({
                                        value: option.name,
                                        label: option.name,
                                        children: []
                                    });
                                    if(option.area_list) {
                                        option.area_list.map(item => {
                                            list[key].children[i].children.push({
                                                value: item.name,
                                                label: item.name
                                            });
                                        });
                                    }
                                });
                            }
                        });
                        setTimeout(()=>{
                            this.areaList = list;
                        },100);
                    }
                } else {
                    this.$notify({
                        type: 'warning',
                        title: '警告',
                        duration: 2000,
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * @description 获取联系地址
         */
        fnChangeAdress () {
            if(this.ruleForm.reginValue && this.ruleForm.reginValue.length == 3) {
                this.ruleForm.province_name = this.ruleForm.reginValue[0];
                this.ruleForm.city_name = this.ruleForm.reginValue[1];
                this.ruleForm.county_name = this.ruleForm.reginValue[2];
            } else {
                this.ruleForm.province_name = this.ruleForm.city_name = this.ruleForm.county_name = '';
            }
        },

        /**
         * @description 同意协议
         */
        handleAgree () {
            if(!this.is_check) {
                this.$notify({
                    type: 'warning',
                    title: '温馨提示',
                    duration: 2000,
                    message: '还未勾选“我已经阅读且同意以上协议”'
                });
                return false;
            }
            this.STEP = 1;
        },

        /**
         * @description 图片上传处理
         */
        fnUploadImage(e, type) {
            let pic = new FormData();

            pic.append('image', e.file);

            this.$upload({
                url: '/EcommerceAlipay/uploadPicture',
                data: pic,
                success: resp => {
                    if (resp.code == 1) {
                        if(type == 'legal_id_card_image' || type == 'legal_id_card_national_image') {
                            this.checkIdCard(resp.data.url, resp => {
                                if(resp === 1) {
                                    this.$set(this.ruleForm, type, resp.data.url);
                                } else {
                                    return false;
                                }
                            });
                        } else {
                            this.$set(this.ruleForm, type, resp.data.url);
                        }
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            cneter: true
                        });
                    }
                }
            });
        },

        /**
         * @description 验证身份证是否正确
         */
        checkIdCard (id_card_image, callback) {
            this.$post('/ShopSettleVerify/checkIdCard', {
                id_card_image: id_card_image
            }, (resp) => {
                if (resp.code == 1) {
                    callback(1);
                } else {
                    callback(0);
                    this.$notify({
                        type: 'warning',
                        title: '警告',
                        duration: 2000,
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * @description: 预览图片
         */
        fnPrievimage (images, index) {
            if(images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$notify({
                    title: '提示',
                    message: '图片类型错误',
                    type: 'warning',
                    duration: 2000
                });
            }
        },

        /**
         * @description 鼠标移入移出图片状态处理
         */
        handleMouseenter (type) {
            switch (type) {
                case 'is_legal_id_card_image':
                    this.is_legal_id_card_image = true;
                    break;
                case 'is_legal_id_card_national_image':
                    this.is_legal_id_card_national_image = true;
                    break;
                case 'is_student_id_card':
                    this.is_student_id_card = true;
                    break;
                case 'is_brand_logo_reg_images':
                    this.is_brand_logo_reg_images = true;
                    break;
                default:
                    break;
            }
        },
        handleMouseLeaver (type) {
            switch (type) {
                case 'is_legal_id_card_image':
                    this.is_legal_id_card_image = false;
                    break;
                case 'is_legal_id_card_national_image':
                    this.is_legal_id_card_national_image = false;
                    break;
                case 'is_student_id_card':
                    this.is_student_id_card = false;
                    break;
                case 'is_brand_logo_reg_images':
                    this.is_brand_logo_reg_images = false;
                    break;
                default:
                    break;
            }
        },

        /**
         * @description 阻止事件冒泡
         */
        stop (event) {
            event.stopPropagation();
        },

        /**
         * @description 返回首页
         */
        handleBackHome () {
            if(location.host.indexOf('home.wxhand.com') > -1 || location.host.indexOf('b-cms-dev.wxhand.com') > -1){
                window.location.href = 'http://www2-dev.wxhand.com';
                return false;
            }

            if(location.host.indexOf('b-cms.wxhand.com') > -1) {
                window.location.href = 'http://www2.wxhand.com';
                return false;
            }
        },

        /**
         * @description 重新填写资料
         */
        handleRestData () {
            this.STEP = 1;
            this.handleGetInfo();
        },

        /**
         * @description 进入后台
         */
        handleNextSyatem () {
            this.$post('/ShopSettleVerify/setVerifyResultChecked', {}, (resp) => {
                if (resp.code == 1) {
                    this.$router.push({
                        name: 'manageLead'
                    });
                } else {
                    this.$notify({
                        type: 'warning',
                        title: '警告',
                        duration: 2000,
                        message: resp.msg
                    });
                }
            });
        }
    },
};
</script>

<style lang="less" scoped>
._perfect {
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: rgba(249, 249, 249, 1);
    ._header {
        width: 100%;
        height: 70px;
        background-color: rgba(248, 119, 57, 1);
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 100px;
        .icon-logo {
            font-size: 40px;
            color: rgba(255, 255, 255, 1);
        }
        ._header_title {
            color: rgba(255, 255, 255, 1);
            font-size: 20px;
            margin-left: 10px;
        }
    }
    ._process {
        width: 1200px;
        height: 126px;
        margin: 0 auto;
        margin-top: 16px;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 108px;
        ._process_item {
            margin-right: 30px;
            display: flex;
            align-items: flex-start;
            ._process_wrap {
                width: 96px;
                display: flex;
                flex-direction: column;
                align-items: center;
                box-sizing: border-box;
                padding-top: 20px;
                ._process_loading {
                    width: 56px;
                    height: 56px;
                    border: 2px rgba(248, 119, 57, 1) solid;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    white-space: nowrap;
                    letter-spacing: 0;
                    color: rgba(248, 119, 57, 1);
                    font-size: 16px;
                    border-radius: 50%;
                }
                ._process_wait {
                    width: 56px;
                    height: 56px;
                    border: 2px rgba(238, 238, 238, 1) solid;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    white-space: nowrap;
                    letter-spacing: 0;
                    color: rgba(153, 153, 153, 1);
                    font-size: 14px;
                    border-radius: 50%;
                }
                ._process_success {
                    color: rgba(248, 119, 57, 1);
                    font-size: 56px;
                }
                ._process_content {
                    font-size: 16px;
                    letter-spacing: 0;
                    white-space: nowrap;
                    margin-top: 14px;
                }
            }
            ._process_line {
                width: 144px;
                height: 2px;
                background-color: rgba(238, 238, 238, 1);
                margin-left: 30px;
                margin-top: 47px;
            }
        }
    }
    ._content {
        width: 1200px;
        flex: 1;
        margin: 0 auto;
        margin-bottom: 32px;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 32px 64px 24px 64px;
        display: flex;
        flex-direction: column;
        ._content_title {
            color: rgba(51, 51, 51, 1);
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 24px;
        }
        ._content_wrap {
            width: 100%;
            flex: 1;
            border: 1px #eee solid;
            background-color: rgba(251, 251, 251, 1);
            margin-bottom: 28px;
        }
        ._content_foot {
            width: 100%;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            ._left {
                display: flex;
                align-items: center;
                i {
                    font-size: 18px;
                    cursor: pointer;
                }
                .icon-check_box_def {
                    color: rgba(206, 206, 206, 1);
                }
                .icon-check_box_sel {
                    color: #f87739;
                }
                ._left_text {
                    color: rgba(153, 153, 153, 1);
                    font-size: 16px;
                    white-space: nowrap;
                    margin-left: 12px;
                }
            }
            ._right {
                width: 160px;
                height: 36px;
                background-color: rgba(248, 119, 57, 1);
                border-radius: 20px;
                text-align: center;
                line-height: 36px;
                color: #ffffff;
                font-size: 16px;
                cursor: pointer;
            }
        }
    }
    ._content2 {
        width: 1200px;
        flex: 1;
        margin: 0 auto;
        margin-bottom: 32px;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 40px 196px 52px 196px;
        display: flex;
        flex-direction: column;
        ._content2_title {
            color: rgba(29, 32, 35, 1);
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 32px;
        }
        ._content2_wrap {
            width: 100%;
            flex: 1;
            margin-bottom: 32px;
            background-color: rgba(249, 249, 249, 1);
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 42px 84px 62px 84px;
            ._content2_title {
                color: rgba(29, 32, 35, 1);
                font-size: 18px;
                font-weight: 500;
                margin-bottom: 16px;
            }
            ._content2_desc {
                color: rgba(96, 105, 114, 1);
                font-size: 14px;
            }
            ._content2_item {
                width: 640px;
                height: 54px;
                display: flex;
                align-items: center;
                margin-top: 32px;
                position: relative;
                cursor: pointer;
                ._content2_item_title {
                    color: rgba(29, 32, 35, 1);
                    font-weight: 500;
                    font-size: 14px;
                    margin: 0 52px 0 24px;
                    width: 70px;
                    letter-spacing: 0;
                }
                ._content2_item_desc {
                    width: 192px;
                    letter-spacing: 0;
                    color: rgba(96, 105, 114, 1);
                    font-size: 14px;
                    margin-right: 246px;
                }
                .icon-chenggong1 {
                    font-size: 24px;
                    color: rgba(248, 119, 57, 1);
                }
                ._content2_item_area {
                    width: 0px;
                    height: 0px;
                    border-width: 12px;
                    border-style: solid;
                    border-color: rgba(248, 119, 57, 1) rgba(248, 119, 57, 1) transparent transparent;
                    position: absolute;
                    left: 0;
                    top: 0;
                    transform: rotate(-90deg);
                }
            }
        }
        ._content2_foot {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            ._content2_prev {
                width: 160px;
                height: 36px;
                text-align: center;
                line-height: 36px;
                border-radius: 20px;
                color: rgba(85, 85, 85, 1);
                font-size: 16px;
                cursor: pointer;
                margin-right: 36px;
                border: 1px rgba(216, 216, 216, 1) solid;
            }
            ._content2_next {
                width: 160px;
                height: 36px;
                background-color: rgba(248, 119, 57, 1);
                text-align: center;
                line-height: 36px;
                border-radius: 20px;
                font-size: 16px;
                cursor: pointer;
                color: #ffffff;
            }
        }
    }
    ._content3 {
        width: 1200px;
        flex: 1;
        margin: 0 auto;
        margin-bottom: 32px;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 32px 96px 52px 96px;
        display: flex;
        flex-direction: column;
        ._content3_title {
            color: rgba(29, 32, 35, 1);
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 32px;
        }
         ._content3_wrap {
            width: 100%;
            flex: 1;
            margin-bottom: 32px;
            background-color: rgba(249, 249, 249, 1);
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            border: 1px rgba(238, 238, 238, 1) solid;
            padding: 16px 32px 52px 32px;
            ._title {
                width: 100%;
                color: rgba(29, 32, 35, 1);
                font-size: 18px;
                font-weight: 500;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px rgba(235, 238, 245, 1) solid;
            }
            ._ruleForm1 {
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                // padding-left: 70px;
                padding-top: 32px;
                ._ruleForm1_item {
                    display: flex;
                    ._ruleForm1_item_desc {
                        color: rgba(32, 160, 255, 1);
                        font-size: 14px;
                        cursor: pointer;
                        margin-left: 15px;
                        margin-top: 13px;
                        text-decoration: underline;
                    }
                }
                ._ruleForm2_item {
                    display: flex;
                    flex-direction: column;
                    ._ruleForm2_type {
                        display: flex;
                        align-items: center;
                    }
                }
                ._ruleForm_wrap {
                    display: flex;
                    align-items: center;
                    position: relative;
                    height: 36px;
                    ._ruleForm_search {
                        width: 88px;
                        height: 36px;
                        text-align: center;
                        line-height: 36px;
                        border: 1px rgba(220, 223, 230, 1) solid;
                        border-radius: 4px;
                        margin-left: 16px;
                        cursor: pointer;
                        color: rgba(32, 160, 255, 1);
                    }
                    ._ruleForm_input {
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 10;
                    }
                    ._ruleForm_select {
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 100;
                    }
                    ._ruleForm_search {
                        position: absolute;
                        position: absolute;
                        left: 628px;
                        z-index: 20;
                    }
                    ._ruleForm_area {
                        width: 488px;
                        margin-top: 12px;
                        border: 1px #e4e7ed solid;
                        border-radius: 4px;
                        background-color: #ffffff;
                        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
                        box-sizing: border-box;
                        min-height: 40px;
                        margin-left: 100px;
                        position: absolute;
                        left: 40px;
                        top: 38px;
                        z-index: 9999999;
                        padding: 0 6px;
                        ._ruleForm_item {
                            width: 488px;
                            height: 38px;
                            line-height: 38px;
                            font-size: 14px;
                            color: #606266;
                            box-sizing: border-box;
                            padding: 0 20px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            background-color: #ffffff;
                            cursor: pointer;
                            &:hover {
                                background-color: #f5f7fa;
                            }
                        }
                    }
                }
                ._ruleForm_map {
                    width: 592px;
                    height: 350px;
                    box-sizing: border-box;
                    // border: 1px red solid;
                    margin-left: 140px;
                    margin-top: 16px;
                }
            }
            ._ruleForm2 {
                margin-top: 32px;
                padding-left: 15px;
                box-sizing: border-box;
                // 上传图片
                .legal_image_wrap {
                    height: 100px;
                    display: flex;
                    align-items: center;
                    .avatar-uploader-small {
                        width: 100px;
                        height: 100px;
                        overflow: hidden;
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 4px;
                        .legal_image {
                            width: 100px;
                            height: 100px;
                            border-radius: 4px;
                        }
                        .legal_ad {
                            width: 100px;
                            height: 100px;
                            border-radius: 4px;
                            position: absolute;
                            left: 0px;
                            top: 0px;
                            z-index: 1;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: rgba(0,0,0,.5);
                            i {
                                color: #ffffff;
                                font-size: 20px;
                                cursor: pointer;
                            }
                            .el-icon-delete {
                                margin-left: 16px;
                            }
                        }
                    }
                    .avatar-uploader-big {
                        width: 160px;
                        height: 136px;
                        overflow: hidden;
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 4px;
                        ._card_side {
                            width: 160px;
                            height: 136px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            background-color: #ffffff;
                            margin-top: 14px;
                            ._card_side_bg {
                                width: 136px;
                                height: 84px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background: url('http://cdn.zsdx.cn/wxhand/idcard_bord.png') center center no-repeat;
                                background-size: 136px 84px;
                                margin-bottom: 8px;
                                .legal_image {
                                    width: 120px;
                                    height: 68px;
                                    border-radius: 4px;
                                }
                            }
                            ._card_side_text {
                                color: rgba(51, 51, 51, 1);
                                font-size: 14px;
                                margin-top: 8px;
                                line-height: 0px;
                            }
                        }
                        .legal_ad {
                            width: 136px;
                            height: 84px;
                            border-radius: 4px;
                            position: absolute;
                            left: 12px;
                            top: 14px;
                            z-index: 1;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: rgba(0,0,0,.5);
                            i {
                                color: #ffffff;
                                font-size: 20px;
                                cursor: pointer;
                            }
                            .el-icon-delete {
                                margin-left: 16px;
                            }
                        }
                    }
                    .legal_view {
                        height: 100px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: flex-start;
                        margin-left: 24px;
                        .legal_title {
                            color: rgba(32, 160, 255, 1);
                            font-size: 14px;
                            text-decoration: underline;
                            line-height: 15px;
                            cursor: pointer;
                        }
                        .legal_content {
                            color: rgba(153, 153, 153, 1);
                            font-size: 12px;
                            line-height: 20px;
                        }
                    }
                }
                .student_code_wrap {
                    display: flex;
                    height: 36px;
                    align-items: center;
                    box-sizing: border-box;
                    .student_code {
                        width: 236px;
                        height: 36px;
                        display: flex;
                        align-items: center;
                        border: 1px rgba(220, 223, 230, 1) solid;
                        padding-left: 20px;
                        border-radius: 4px;
                    }
                    .student_code:last-child {
                        margin-left: 16px;
                    }
                }
                ._ruleForm_time {
                    display: flex;
                    align-items: center;
                }
            }
        }
        ._content3_foot {
            width: 100%;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            ._content3_prev {
                width: 160px;
                height: 36px;
                text-align: center;
                line-height: 36px;
                border-radius: 20px;
                color: rgba(85, 85, 85, 1);
                font-size: 16px;
                cursor: pointer;
                margin-right: 36px;
                border: 1px rgba(216, 216, 216, 1) solid;
            }
            ._content3_next {
                width: 160px;
                height: 36px;
                background-color: rgba(248, 119, 57, 1);
                text-align: center;
                line-height: 36px;
                border-radius: 20px;
                font-size: 16px;
                cursor: pointer;
                color: #ffffff;
            }
        }
    }
    ._content4 {
        width: 1200px;
        flex: 1;
        margin: 0 auto;
        margin-bottom: 32px;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 32px 96px 52px 96px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .iconfont {
            color: rgba(95,186,178,1);
            font-size: 72px;
            margin-bottom: 24px;
        }
        ._content4_title {
            color: rgba(0, 0, 0, 1);
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 24px;
        }
        ._content4_text {
            color: rgba(51, 51, 51, 1);
            font-size: 14px;
            line-height: 24px;
            width: 500px;
            text-align: center;
        }
        ._content4_button {
            width: 160px;
            height: 36px;
            border-radius: 18px;
            border: 1px rgba(216, 216, 216, 1) solid;
            text-align: center;
            line-height: 36px;
            text-align: center;
            color: rgba(96, 105, 114, 1);
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            margin-top: 52px;
        }
        ._content4_button_rest {
            width: 160px;
            height: 36px;
            border-radius: 18px;
            text-align: center;
            line-height: 36px;
            text-align: center;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            margin-top: 52px;
            background-color: rgba(248, 119, 57, 1);
            color: #ffffff;
        }
    }
}
</style>

<style lang="less">
._perfect {
    .demo-ruleForm {
        .el-input__inner {
            background-color: rgba(251, 251, 251, 1);
        }
    }
    // provide样式
    .container-form-provide {
        padding: 0px 18px;
        color: #666666;
        font-size: 12px;
        line-height: 20px;
        span {
            color: #333333;
            font-weight: 500;
        }
    }
    .el-no-button {
        border: none;
        font-size: 12px;
        line-height: 20px;
        height: 36px;
        padding: 0;
        &:hover {
            background-color: transparent;
        }
    }
    ._ruleForm2 {
        .el-upload {
            border: none;
            width: 100px;
            height: 100px;
            border-radius: 4px;
        }
    }
    ._ruleForm2 {
        .avatar-uploader-big {
            .el-upload {
                border: none;
                width: 160px;
                height: 136px;
                border-radius: 4px;
            }
        }
    }
    .student_code_wrap {
        .el-radio {
            color: rgba(194, 194, 194, 1);
        }
    }
}
</style>